<template>
  <div>
    <Header :left="true" leftText="返回" title="用工差异报表" />
    <div>
      <DropdownMenu style="margin-top: 10px; background-color: #d3d3d3">
        <DropdownItem
          v-model="siteIndex"
          :options="sites"
          @change="siteChange"
        />
        <DropdownItem ref="time" title="时间" @open="showDialog = true" />
      </DropdownMenu>
    </div>

    <van-dialog
      v-model="showDialog"
      title="查询条件选择"
      show-cancel-button
      confirm-button-text="确认"
      cancel-button-text="取消"
      @confirm="timeConfirm"
      @cancel="clearTime"
    >
      <Form :style="autoHeight">
        <van-field
          readonly
          clickable
          name="timeStr"
          :value="valueStr"
          label="开始时间"
          placeholder="点击选择日期"
          @click="openStartTime"
        />
        <van-calendar
          v-model="showCalendarStr"
          @confirm="onConfirmStr"
          @closed="startConcel"
          :min-date="minDate"
          :max-date="maxDate"
        />
        <van-field
          readonly
          clickable
          name="timeEnd"
          :value="valueEnd"
          label="结束时间"
          placeholder="点击选择日期"
          @click="openEndTime"
        />
        <van-calendar
          v-model="showCalendarEnd"
          @confirm="onConfirmEnd"
          @closed="endConcel"
          :min-date="minDate"
          :max-date="maxDate"
        />
      </Form>
    </van-dialog>
    <div>
      <v-table
        is-horizontal-resize
        style="width: 100%"
        :show-vertical-border="true"
        :columns="columns"
        :max-height="350"
        :table-data="tableData"
        row-hover-color="#eee"
        row-click-color="#edf7ff"
      ></v-table>
    </div>
    <!-- <van-pagination
      width="this.screenWidth"
      class="pagination"
      force-ellipses
      v-model="queryParamsRead.pageNum"
      :total-items="queryParamsRead.total"
      @change="pgn_change_read"
      :items-per-page="queryParamsRead.pageSize"
    /> -->
  </div>
</template>
<script>
import {
  DropdownMenu,
  DropdownItem,
  Button,
  Cell,
  Field,
  Col,
  Row,
  Pagination,
  Sticky,
  Toast,
  Dialog,
  Divider,
  Calendar,
} from "vant";
Vue.use(Divider);
Vue.use(Calendar);
Vue.use(Pagination);
Vue.use(Field);
Vue.use(Dialog);
import { _httpClient } from "@/libs/api";
import Header from "@/components/header.vue";
import { VTable } from "vue-easytable";
import "vue-easytable/libs/themes-base/index.css";
import { storage } from "@/libs/utils";
import {
  removeToken,
  getToken,
  setBaseApiFrefix,
  getBaseApiFrefix,
} from "@/libs/auth";
export default {
  components: {
    Button,
    Header,

    Cell,
    Field,
    Col,
    Row,

    Sticky,
    DropdownMenu,
    DropdownItem,
    Divider,
    VTable,
    Dialog,
  },

  data() {
    return {
      //查询条件
      siteIndex: 0, //工厂
      nickName: null, //人员
      taskTypeIndex: 0, //任务类型
      valueStr: null, //开始时间查询条件
      valueEnd: null, //结束时间查询条件

      user: [],
      dpIndex: 0,
      //弹窗高度
      autoHeight: {
        height: "",
      },
      showCalendarStr: false,
      showCalendarEnd: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2030, 11, 31),
      showDialog: false,
      showUserDialog: false,
      queryParamsRead: {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      },
      tableData: [
        {
          seq: "1",
          department: "质量部",
          dayTask: "30",
          weekTask: "20",
          monthTask: "40",
          techTask: "50",
        },
        {
          seq: "1",
          department: "工艺部",
          dayTask: "30",
          weekTask: "20",
          monthTask: "40",
          techTask: "50",
        },
        {
          seq: "1",
          department: "生产部",
          dayTask: "30",
          weekTask: "20",
          monthTask: "40",
          techTask: "50",
        },
      ],
      pointColumns: [
        //表格列头
        {
          field: "seqNum",
          title: "序号",
          width: 40,
          titleAlign: "center",
          columnAlign: "center",
          isResize: true,
          formatter: function (value, index) {
            return index + 1;
          },
          titleCellClassName: "title-cell-class-name-test",
        },
        {
          field: "workdate",
          title: "上班日期",
          width: 100,
          titleAlign: "center",
          columnAlign: "center",
          isResize: true,
          titleCellClassName: "title-cell-class-name-test",
        },
        {
          field: "pshiftid",
          title: "班次",
          width: 50,
          titleAlign: "center",
          columnAlign: "center",
          isResize: true,
          titleCellClassName: "title-cell-class-name-test",
        },
        {
          field: "planoperateworks",
          title: "计划操作工",
          width: 150,
          titleAlign: "center",
          columnAlign: "center",
          isResize: true,
          titleCellClassName: "title-cell-class-name-test",
        },
        {
          field: "planassistworks",
          title: "计划辅助用工",
          width: 150,
          titleAlign: "center",
          columnAlign: "center",
          isResize: true,
          titleCellClassName: "title-cell-class-name-test",
        },
        {
          field: "factworks",
          title: "实际用工",
          width: 100,
          titleAlign: "center",
          columnAlign: "center",
          isResize: true,
          titleCellClassName: "title-cell-class-name-test",
        },
        {
          field: "facttemporaryworks",
          title: "临时用工",
          width: 150,
          titleAlign: "center",
          columnAlign: "center",
          isResize: true,
          titleCellClassName: "title-cell-class-name-test",
        },
        {
          field: "worksgap",
          title: "用工差异",
          width: 150,
          titleAlign: "center",
          columnAlign: "center",
          isResize: true,
          titleCellClassName: "title-cell-class-name-test",
        },
        {
          field: "gaprate",
          title: "差异百分比",
          width: 150,
          titleAlign: "center",
          columnAlign: "center",
          isResize: true,
          titleCellClassName: "title-cell-class-name-test",
        },
        {
          field: "analysis",
          title: "缺口分析",
          width: 200,
          titleAlign: "center",
          columnAlign: "center",
          isResize: true,
          titleCellClassName: "title-cell-class-name-test",
        },
      ],

      columns: [],
      sites: [], //工厂
      taskTypes: [
        { value: 0, text: "点检" },
        { value: 1, text: "维修" },
      ], //任务类型
      data1: [], //饼图数据
      data: [],
    };
  },
  created: function () {
    let oldHight = api.winWidth;
    this.screenWidth = oldHight;
    //获取当前系统登录用户
    this.user = JSON.parse(storage.get("user"));
    //初始化设置弹窗高度
    this.autoHeight.height = "100px";
    //表格列头初始化
    this.columns = this.pointColumns;

    //初始化查询条件
    this.initQuertSiteList();
    var myDate = new Date();
    this.valueStr =
      myDate.getFullYear() +
      "-" +
      (myDate.getMonth() + 1) +
      "-" +
      myDate.getDate();

    this.valueEnd =
      myDate.getFullYear() +
      "-" +
      (myDate.getMonth() + 1) +
      "-" +
      myDate.getDate();
  },
  mounted: function () {},

  methods: {
    //时间确认查询
    timeConfirm() {
      //重新查询数据
      this.queryPointCheckData();
    },
    //人员确认查询
    userConfirm() {
      //重新查询数据
      this.queryPointCheckData();
    },
    pgn_change_read() {
      this.queryPointCheckData();
    },
    //查询点检任务数据
    queryPointCheckData() {
      this.quertPointCheckTableList();
    },
    //下拉框工厂数据切换
    siteChange(value) {
      this.siteIndex = value;
      //重新查询数据
      this.queryPointCheckData();
    },
    //部门数据切换
    departChange(value) {
      this.departIndex = value;
      //重新查询数据
      this.queryPointCheckData();
    },

    //初始化查询工厂下拉框
    async initQuertSiteList() {
      let _this = this;
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() + "/app/report/siteList"
        );
        if (res.code === 200) {
          if (res.rows.length > 0) {
            _this.sites = [];
            res.rows.forEach(function (item, index) {
              let site = { value: item.siteKey, text: item.siteName };
              _this.sites.push(site);
            });
            _this.siteIndex = _this.sites[0].value;
            _this.queryPointCheckData();
          }
        } else {
          alert(res.msg);
        }
      } catch (e) {
        alert(JSON.stringify(e));
      }
    },

    //查询表格数据
    async quertPointCheckTableList() {
      let _this = this;

      //工厂
      let site;
      if (_this.sites.length != 0) {
        site = _this.siteIndex;
      }
      // let url =
      //   "/app/manhourfact/report/plandatareport/companyid=" +
      //   site +
      //   "&pageNum=" +
      //   this.queryParamsRead.pageNum +
      //   "&pageSize=" +
      //   this.queryParamsRead.pageSize;

      // if (_this.valueStr != null) {
      //   url += "&workdate=" + _this.valueStr;
      // }
      // if (_this.endTime != null) {
      //   url += "&workdate=" + _this.valueEnd;
      // }

      // try {
      //   let res = await _httpClient.get(_httpClient.getApiPrefix() + url);
      //   if (res.code === 200) {
      //     _this.tableData = res.rows;
      //     _this.queryParamsRead.total = res.total;
      //   } else {
      //     alert(res.msg);
      //   }
      // } catch (e) {
      //   alert(JSON.stringify(e));
      // }
            try {
        let res = await _httpClient.post(_httpClient.getApiPrefix() + '/app/manhourfact/report/plandatareport', {
          body: {
            companyid: site,
            workdate: _this.valueStr,
          },
        })
        if (res.code === 200) {
          _this.tableData = res.rows
        } else {
          alert(res.msg)
        }
      } catch (e) {
        alert(JSON.stringify(e))
      }
    },

    //日期格式化
    formatDate(date) {
      let year = date.getFullYear();
      let mouth = date.getMonth() + 1;
      if (mouth < 10) {
        mouth = "0" + mouth;
      }
      let day = date.getDate();
      if (day < 10) {
        day = "0" + day;
      }
      return year + "-" + mouth + "-" + day;
    },

    //时间清空
    clearTime() {
      this.valueStr = "";
      this.valueEnd = "";
      //重新查询数据
      this.queryPointCheckData();
    },
    //人员取消
    clearUser() {
      this.nickName = null;
      //重新查询数据
      this.queryPointCheckData();
    },

    //开始时间取消
    startConcel() {
      // this.valueStr = ''
      this.autoHeight.height = "100px";
    },
    //结束时间取消
    endConcel() {
      // this.valueEnd = ''
      this.autoHeight.height = "100px";
    },

    //打开开始时间选择
    openStartTime() {
      this.showCalendarStr = true;
      this.autoHeight.height = "400px";
    },

    //打开结束时间选择
    openEndTime() {
      this.showCalendarEnd = true;
      this.autoHeight.height = "400px";
    },

    //开始时间确定
    onConfirmStr(date) {
      this.valueStr = this.formatDate(date);
      this.showCalendarStr = false;
      this.autoHeight.height = "100px";
    },
    //结束时间确认
    onConfirmEnd(date) {
      this.valueEnd = this.formatDate(date);
      this.showCalendarEnd = false;
      this.autoHeight.height = "100px";
    },
  },
};
</script>
<style>
body {
  background-color: White;
}
.selectdTextScroll {
  display: inline-block;
  /* position: fixed; */
  top: 9rem;
  overflow: scroll;
  right: 0;
  width: 100%;
  height: 300px;
  z-index: 1;
}
.title-cell-class-name-test {
  background-color: #f8f8f8;
  color: #000000;
}
</style>
